<!DOCTYPE html>
<html>
  <head>
    <title>Breadcrumb</title>
    <script type='text/javascript' src='//www.google.com/jsapi'></script>
    <script type='text/javascript'>google.load('jquery', '1');</script>
    <script type='text/javascript' src='bc.js'></script>
    <script type='text/javascript'>
      function Compile() {
        var source = $('#source').val();
        var req = { type: 'POST', url: '/compile' };
        req.data = 'source=' + escape(source);
        req.dataType = 'json';
        req.success = load;
        $.ajax(req);
        return false;
      }
      $(document).ready(function() {
        $('#compiler').submit(Compile);
      });
    </script>
    <style type='text/css'>
      table { margin: 0 auto; }
      td { width: 50%; }
      #view {
        background: #ccc;
        padding: 1em;
        vertical-align: top;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td id='view'>&nbsp;</td>
        <td id='code'>
          <form id='compiler'>
            <p><textarea id='source'
              rows='40' cols='80'>(1) Hello, world!</textarea></p>
            <p><input type='submit' /></p>
          </form>
        </td>
      </tr>
    </table>
  </body>
</html>
